<template>
  <div class="wrap" ref="myChartToilet"></div>
</template>
<script>
export default {
  props: {
    wcAllInfo: {
      type: Object,
      require: true,
      default: () => {},
    },
  },
  data() {
    return {
      myChartToilet: null,
    };
  },
  watch: {
    wcAllInfo: {
      handler(newVal, oldVal) {
        const { myChartToilet } = this;

        if (myChartToilet) {
          var option = myChartToilet.getOption();
          option.title[0].text = newVal.wcSum === undefined ? "" : newVal.wcSum;
          option.series[0].data = [
            {
              value: newVal.manWcNum === undefined ? 0 : newVal.manWcNum,
              name: "男厕所",
            },
            {
              value: newVal.womanWcNum === undefined ? 0 : newVal.womanWcNum,
              name: "女厕所",
            },
            {
              value:
                newVal.threeWcNumWcNum === undefined
                  ? 0
                  : newVal.threeWcNumWcNum,
              name: "第三卫生间",
            },
          ];
          myChartToilet.setOption(option);
        }
      },
      deep: true,
    },
  },
  mounted() {
    this.$nextTick(() => {
      let dom = this.$refs.myChartToilet;
      this.myChartToilet = this.$echarts.init(dom);
      function Pie2() {
        let dataArr = [];
        for (var i = 0; i < 100; i++) {
          if (i % 2 === 0) {
            dataArr.push({
              name: (i + 1).toString(),
              value: 20,
              itemStyle: {
                normal: {
                  color: "#4280FE",
                  borderWidth: 3,
                  borderColor: "rgba(0,0,0,0)",
                },
              },
            });
          } else {
            dataArr.push({
              name: (i + 1).toString(),
              value: 100,
              itemStyle: {
                normal: {
                  color: "rgba(0,0,0,0)",
                  borderWidth: 3,
                  borderColor: "rgba(0,0,0,0)",
                },
              },
            });
          }
        }
        return dataArr;
      }
      const option = {
        title: {
          text: 0,
          x: "center",
          y: "center",
          textStyle: {
            color: "#3576E7",
          },
        },
        series: [
          {
            name: "厕所",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,

            data: [
              { value: 0, name: "男厕所" },
              { value: 0, name: "女厕所" },
              { value: 0, name: "第三卫生间" },
            ],
            label: {
              lineHeight: 17,
              formatter: function (data) {
                if (data.dataIndex == 0) {
                  return (
                    "{name|" +
                    data.data.name +
                    "}\n{time1|" +
                    data.data.value +
                    "}"
                  );
                } else if (data.dataIndex == 1) {
                  return (
                    "{name|" +
                    data.data.name +
                    "}\n{time2|" +
                    data.data.value +
                    "}"
                  );
                } else {
                  return (
                    "{name|" +
                    data.data.name +
                    "}\n{time3|" +
                    data.data.value +
                    "}"
                  );
                }
              },
              rich: {
                name: {
                  color: "#F0F0F0",
                  fontSize: 13,
                },

                time1: {
                  color: "#4BBAF9",
                  fontSize: 13,
                },
                time2: {
                  color: "#FF8DBD",
                  fontSize: 13,
                },
                time3: {
                  color: "#19D995",
                  fontSize: 13,
                },
              },
            },
            labelLine: {
              length: 10,
              length2: 40,
            },

            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function (idx) {
              return Math.random() * 200;
            },
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
              normal: {
                color: (params) => {
                  var colorList = [
                    {
                      c1: "#4DC9FF", //男厕所

                      c2: "#3D8B94",
                    },
                    {
                      c1: "#FF748D", //女厕所
                      c2: "#FF7DAF",
                    },
                    {
                      c1: "#1EDF96", //第三卫生间
                      c2: "#3D8B94",
                    },
                  ];
                  return new this.$echarts.graphic.LinearGradient(1, 1, 1, 0, [
                    {
                      //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                      offset: 0,
                      color: colorList[params.dataIndex].c1,
                    },
                    {
                      offset: 1,
                      color: colorList[params.dataIndex].c2,
                    },
                  ]);
                  /*  return colorList[params.dataIndex]*/
                },
              },
            },
          },
          // 边框的设置
          {
            name: "外边框",
            type: "pie",
            zlevel: 0,
            silent: true,
            center: ["50%", "50%"],
            radius: ["86%", "85%"],
            z: 1,
            label: {
              normal: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: Pie2(),
          },
        ],
      };
      this.myChartToilet.setOption(option);
    });
  },
};
</script>
<style lang="scss" scoped>
.wrap {
  width: 505px;
  height: 290px;
  box-sizing: border-box;
  padding: 60px 70px 0px 90px;
  background: url("../../assets/img/home-03.png") no-repeat center center;
  background-size: contain;
  display: flex;
  justify-content: space-between;
}
</style>